<template>
  <div class="member-info">
    <zmemberInfo :text="'余额'">
      <template #btns>
        <el-button class="btn-2" v-jurisdiction="'customer:account:balance:update'" @click="openTransaction">交易</el-button>
        <el-button class="btn-1" v-jurisdiction="'customer:account:balance:updateLog'">交易明细</el-button>
        <!-- <el-button class="btn-1">密码</el-button> -->
      </template>
      <template #content>
        <div class="member-content">
          <div class="member-ctx-head">余额: {{balanceShow || 0.00}}</div>
          <div class="info">
            <div class="info-l">
              <span>欠款金额: </span><span>{{ amountOwedShow || 0}}</span>
            </div>
            <div class="info-r">
              <span>馈赠金余额:</span> <span>{{ giftsOfGoldShow || 0}}</span>
            </div>
          </div>
          <!-- <div class="info">
            <div class="info-l">
              <span>累计充值:</span>  <span>0</span>
            </div>
            <div class="info-r">
              <span>累计消费:</span> <span>0</span>
            </div>
          </div>
          <div class="info">
            <div class="info-l">
              <span>累计充值次数:</span>  <span>0</span>
            </div>
            <div class="info-r">
              <span>累计消费次数:</span> <span>0</span>
            </div>
          </div> -->
        </div>
      </template>
    </zmemberInfo>
    <zmemberInfo text="积 分">
      <template #btns>
        <el-button class="btn-2" v-jurisdiction="'customer:account:integral:update'">调整</el-button>
        <el-button class="btn-1" v-jurisdiction="'customer:account:integral:updateLog'">变动记录</el-button>
      </template>
      <template #content>
        <div class="member-content">
          <div class="member-ctx-head">当前积分:  {{ integral || 0 }}</div>
          <div class="info">
            <div class="info-l">
              <span>累计消费积分: </span><span>0</span>
            </div>
            <div class="info-r">
              <span>累计积分:</span> <span>0</span>
            </div>
          </div>
          <!-- <div class="info">
            <div class="info-l">
              <span>累计推荐积分: </span><span>0</span>
            </div>
            <div class="info-r">
              <span>累计使用积分:</span> <span>0</span>
            </div>
          </div>
          <div class="info">
            <div class="info-l">
              <span>累计活动积分: </span><span>0</span>
            </div>
            
          </div> -->
        </div>
      </template>
    </zmemberInfo>

    <zdialog title="余额" @handleClose="closeDialog" v-model="dialogVisible" :btnData="dialogBtnData">
      <template #body>
        <div class="balance-info">
          <div class="person-balance-info">
            <div class="info-item">
              <span>姓名: </span>
              <span>{{ customerName }}</span>
            </div>
            <div class="info-item">
              <span>当前余额: </span>
              <span>{{balanceShow || 0}}</span>
            </div>
            <div class="info-item">
              <span>馈赠金: </span>
              <span>{{giftsOfGoldShow || 0}}</span>
            </div>
          </div>
          <div class="person-balance-type">
            <div class="balence-type-select">
              <span>操作</span>
              <btnTab :btnsList="btnsList" @isClickType="isClickType"></btnTab>
              
            </div>
            <div class="type-area">
              <div v-if="isActiveType === '充值'">
                <div class="item-wrapper">
                    <span class="label">支付方式</span>
                    <div>
                      <el-select v-model="payType" clearable filterable placeholder="选择支付方式">
                        <el-option
                          v-for="item in paymentList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                        </el-option>
                      </el-select>
                    </div>
                </div>
                <div>
                    <!-- 充值展示 -->
                    <div class="item-wrapper">
                      <span class="label">金额</span>
                      <div>
                        <el-input  v-model="moneyShow"></el-input>
                      </div>
                    </div>
                    <div class="item-wrapper">
                      <span class="label">馈赠金</span>
                      <div>
                        <el-input-number v-model="giftsOfGoldShow"></el-input-number>
                      </div>
                    </div>
                </div>
              </div>
              <div v-if="isActiveType === '退费'">
                <div class="item-wrapper">
                    <span class="label">支付方式</span>
                    <div>
                      <el-select v-model="payType" clearable filterable placeholder="选择支付方式">
                        <el-option
                          v-for="item in paymentList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                        </el-option>
                      </el-select>
                    </div>
                </div>
                <div>
                    <!-- 充值展示 -->
                    <div class="item-wrapper">
                      <span class="label">金额</span>
                      <div>
                        <el-input v-model="moneyShow"></el-input>
                      </div>
                    </div>
                    <div class="item-wrapper">
                      <span class="label">馈赠金</span>
                      <div>
                        <el-input-number v-model="giftsOfGoldShow"></el-input-number>
                      </div>
                    </div>
                </div>
                <div class="item-wrapper">
                  <span class="label">备注</span>
                  <div>
                    <el-input type="textarea" v-model="remark"></el-input>
                  </div>
                </div>
              </div>
              <div v-if="isActiveType === '转账'">
                <div class="item-wrapper">
                  <span class="label">患者查询</span>
                  <div>
                    <zsearchname @setName="setName"></zsearchname>
                  </div>
                </div>

                <div>
                  <!-- 展示图片 -->
                  <article class="search-info">
                    <div >
                        <el-avatar v-if="gender === '男'" :size="100" :src="male"></el-avatar>
                        <el-avatar v-else-if="gender === '女'" :size="100" :src="female"></el-avatar>
                        <el-avatar v-else="gender === ''" :size="100" >user</el-avatar>
                    </div>
                    <div>
                      <div class="item-info" v-for="i in personInfo" >
                        <span>{{i.label}}: </span>
                        <span>{{i.val}}</span>
                      </div>
                    </div>
                    
                  </article>
                </div>

                <div class="item-wrapper">
                    <span class="label">支付方式</span>
                    <div>
                      <el-select v-model="payType" clearable filterable placeholder="选择支付方式">
                        <el-option
                          v-for="item in paymentList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                        </el-option>
                      </el-select>
                    </div>
                </div>

                <div class="item-wrapper">
                  <span class="label">金额</span>
                  <div>
                    <el-input v-model="moneyShow"></el-input>
                  </div>
                </div>
                <div class="item-wrapper">
                  <span class="label">备注</span>
                  <div>
                    <el-input type="textarea" v-model="remark"></el-input>
                  </div>
                </div>
              </div>
            
          </div>
        </div>
        </div>
			</template>
    </zdialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, watch } from "@vue/runtime-core";
import zmemberInfo from "../../../components/styleBorder/memberInfo.vue";
import zdialog from '@components/dialog/dialog.vue'
import btnTab from '@components/btns/btns-tab.vue'
import { Option } from '../../../types/index'
import usePromiseRequest from "../../../hook/request"
import zsearchname from "../../../components/searchinput/searchName.vue"
import { useRoute } from 'vue-router'
// 引入图片资源
import male from "../../../assets/image/male-adult.png"
import female from "../../../assets/image/female-adult.png"
import { ElMessage } from 'element-plus';

export default defineComponent({
  name: 'Member',
  components: {
    zmemberInfo,
    zdialog,
    btnTab,

    zsearchname,
  },
  setup() {
    const route = useRoute()
    const list = reactive({
      memberList:'',
      dialogVisible: false,
      btnsList: ['充值', '退费', '转账'],
      isActiveType: '充值',

      customerId: route.params.id || null,
      customerName: '',
      payType: '',
      moneyShow: '',
      remark: '',
      paymentList: <Option[]>[],
      toCustomerId: null,
      balanceShow: '',
      giftsOfGoldShow: 0,
      amountOwedShow: '',
      integral: '',
      gender: '',

      personInfo: [
        {
          name: 'name',
          label: '姓名',
          val: ''
        },
        {
          name: 'historySickNum',
          label: '病历号',
          val: ''
        },
        {
          name: 'mobileFirstNumStr',
          label: '手机',
          val: ''
        },
      ]
    })

    watch(() => route.params.id, (newID) => {
      list.customerId = newID
      if(newID) {
        getData()
      }
      
    })

    onMounted(() => {
      console.log('member, onMounted')
        getData()
        getPaymentList()

        list.customerName = window.localStorage.getItem('customerName') as string
    })

    const setName = (data: any) => {
      list.toCustomerId = data.id;
      list.gender = data.gender
      list.personInfo.forEach(i => {
        for(let o in data) {
          if(i.name === o) {
            i.val = data[o]
          }
        }
      })
    }

    const getData = async() => {
      let res: any = await usePromiseRequest(`customer/account/getCustomerAccount/${list.customerId}`, {}, 'GET')
      console.log(res)
      window.localStorage.setItem('balanceShow', res.data.balanceShow)
      let num = res.data.giftsOfGoldShow || 0
      window.localStorage.setItem('giftsOfGoldShow', num)

      list.balanceShow = res.data.balanceShow;
      list.integral = res.data.integral;
      list.giftsOfGoldShow = res.data.giftsOfGoldShow
      list.amountOwedShow = res.data.amountOwedShow
    }
    

    const getPaymentList = async() => {
      let result:any = await usePromiseRequest(`customer/account/getPayTypeCustomerType`, {}, 'GET')
      console.log(result)
      list.paymentList = result.data || []
    }
    

    const isClickType = (val: string) => {
      list.isActiveType = val
    }

    const openTransaction = () => {
      list.dialogVisible = true
      list.customerName = window.localStorage.getItem('customerName') as string
      console.log('1')
    }

    const closeDialog = () => {
      list.dialogVisible = false;
      resetData()
    }
    const resetData = () => {
      list.isActiveType = '充值';
      list.payType = '';
      list.moneyShow = '';
      list.remark = '';
      list.giftsOfGoldShow = 0

      list.toCustomerId = null;
      list.personInfo.forEach(i => i.val = '')

    }
    const dialogBtnData = [
      {
        name: '确定',
        func: (data: any) => {
          save()
        }
      },
      {
        name: '确定并打印',
        func: (data: any) => {
          // save()
          console.log('确定并打印')
        }
      },
      {
        name: '取消',
        func: (data: any) => {
          list.dialogVisible = false
        }
      },
    ]

    const save = async() => {
      let params = {
        customerId: list.customerId,
        moneyShow: list.moneyShow,
        payType: list.payType,
        remark: list.remark,
        giftsOfGoldShow: list.giftsOfGoldShow
      } as any
      if(list.isActiveType === '转账') {
        params.toCustomerId = list.toCustomerId
      }
      switch(list.isActiveType) {
        case '充值':
          let result:any = await usePromiseRequest(`customer/account/topUpBalance`, params, 'POST')
          if(result.code === 0) {

            closeDialog()
            getData()
          }
          console.log(result)
          break;
        case '退费':
          let result1:any = await usePromiseRequest(`customer/account/balanceToMoney`, params, 'POST')
          if(result1.code === 0) {

            closeDialog()
            getData()
          }
          break;
        case '转账':
          if(!list.toCustomerId) {
            ElMessage.warning('您还未选择患者')
            return false
          } else {
            let result2:any = await usePromiseRequest(`customer/account/transfer`, params, 'POST')
            if(result2.code === 0) {

              closeDialog()
              getData()
            }
          }
          
          break;
        default:
          break
      }
    }
    return {
      ...toRefs(list),
      openTransaction,
      closeDialog,
      dialogBtnData,
      isClickType,
      setName,
      male,
      female,
      getData,
    }
  }

})
</script>

<style lang="scss" scoped>
.member-info {
  display: flex;
  justify-content: space-around;
  box-sizing: border-box;
  padding: 20px;
  .member-content {
    height: 120px;
    box-sizing: border-box;
    .info {
      display: flex;
      padding: 10px 0 0 0;
      font-size: $fontSize;
      .info-l {
        flex: 1;
        & > span:last-child {
          padding-left: 20px;
        }
      }
      .info-r{
        flex: 1;
        & > span:last-child {
          padding-left: 20px;
        }
      }
    }
  }
}

.balance-info {
  .person-balance-info {
    display: flex;
    border-bottom: 1px solid $mainColor;
    .info-item {
      height: 30px;
      line-height: 30px;
      padding: 0 15px;
      
      & > span:nth-child(2) {
        padding-left: 10px;
        font-weight: bold;
        color: $primaryText;
      }
    }
    .info-item:nth-child(1) {
      padding-left: 5px;
    }
  }
  .person-balance-type {
    display: flex;
    flex-direction: column;
    .balence-type-select {
      display: flex;
      height: 40px;
      line-height: 40px;
      padding-left: 5px;
      margin: 10px 0;
      & > span {
        font-weight: bold;
        width: 80px;
      }
    }

    .type-area {
      display: flex;
      .item-wrapper {
        display: flex;
        align-items: center;
        padding: 10px 0;

        .label {
          width: 80px;
          padding-left: 8px;
        }
      }
    }
    
  }
}

.search-info {
  display: flex;
  & > div:nth-child(1) {
    border-radius: 50%;
    width: 100px;
    height: 100px;

    el-avatar  {
      width: 100%;
      height: 100%;
    }
  }
  .avatar-img {
    border-radius: 50%;
  }

  & > div:nth-child(2) {
    padding-left: 10px;
  }
}

.item-info {
  display: flex;
  & > span:nth-child(1) {
    display: block;
    width: 80px;

  }
}
</style>